<template>
  <el-dialog
    :title="signupForm.formTitle"
    :visible.sync="signupForm.dialogFormVisible"
    @close="close_signup"
    @open="getRoleList()"
    width="500px"
  >
    <div id="signup-container">
      <el-form :model="signupForm" status-icon :rules="rules" ref="signupForm" label-width="20%">
        <el-form-item label="用户名" prop="username">
          <el-input
            type="text"
            v-model="signupForm.username"
            autocomplete="off"
            style="width: 80%;"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="signupForm.password"
            autocomplete="off"
            style="width: 80%;"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="signupForm.role">
            <el-option v-for="(role,index) in roleList" :key="index" :label="role" :value="role"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close_signup">取 消</el-button>
      <el-button type="primary" @click="signup('signupForm')">注 册</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import axios from 'axios'
export default {
  name: "signup",
  data() {
    var validateUsername = (rule, value, callback) => {
      let params = new URLSearchParams();
      params.append("username",value);
      this.$ajax.post(this.$server + "/user/getUserCount", params)
        .then(res => {
          if(res.data == 0){
            callback();
          }else{
            callback(new Error('用户名已经存在'));
          }
        })
        .catch(error => {
          console.log("发生错误：" + error);
        })
    };
    return {
      signupForm: {
        formTitle: "用户注册",
        dialogFormVisible: false,
        username: "",
        password: "",
        role: ""
      },
      roleList: [],
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, message: "长度不小于3个字符", trigger: "blur" },
          { validator: validateUsername, trigger: 'blur' },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "长度不小于6个字符", trigger: "blur" }
        ],
        role: [{ required: true, message: "请选择角色", trigger: "change" }]
      },
      isLogin: false
    };
  },
  methods: {
    close_signup() {
      this.signupForm.dialogFormVisible = false;
      this.$emit("reload_data_request");
    },
    signup(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let params = new URLSearchParams();
          params.append("username", this.signupForm.username);
          params.append("password", this.signupForm.password);
          params.append("role", this.signupForm.role);
          this.$ajax
            .post(this.$server + "/user/signup", params)
            .then(res => {
              if (res.data == true) {
                this.$message.success("注册成功");
                this.close_signup();
              } else {
                this.$message.error("注册失败");
              }
            })
            .catch(error => {
              console.log("发生错误：" + error);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getRoleList() {
      this.$ajax
        .post(this.$server + "/role/getRole")
        .then(res => {
          this.roleList = res.data;
        })
        .catch(error => {
          console.log("发生错误：" + error);
        });
    },
    reset(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style scoped>
#signup-container {
  width: 400px;
  height: 300px;
  margin: 0 auto;
}
</style>
